<template>
    <div class="container">
        <!-- <div class="header">
            <i class="el-icon-collection"></i>
            <span>采集点</span>
        </div> -->
        <div class="content">
            <!-- <el-input placeholder="请输入内容" v-model="input" clearable> </el-input> -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="名称查询：">
                    <el-input v-model="formInline.name" placeholder="采样点名称" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="采样点编号：">
                    <el-input v-model="formInline.code" placeholder="采样点编号" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="采样人：">
                    <el-input v-model="formInline.sampler" placeholder="采样人" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="行政区划：">
                    <el-select v-model="value1" placeholder="请选择国家">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                    <el-select v-model="value2" placeholder="请选择省份">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="采样时间：">
                    <el-date-picker type="dates" v-model="value3" placeholder="选择一个或多个日期"></el-date-picker>
                </el-form-item>
                <el-form-item label="树种：">
                    <el-select v-model="value4" placeholder="请选择树种">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据责任人：">
                    <el-input v-model="formInline.owner" placeholder="数据责任人" style="width: 300px"></el-input>
                </el-form-item>
                <el-form-item label="列选择：">
                    <el-select v-model="value5" placeholder="请选择列名">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                            :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="空间查询：">
                    <!-- 空间查询组件 -->
                </el-form-item>
                <el-form-item label="海拔高度：">
                    <!-- 海拔高度组件 -->
                </el-form-item>
                <el-form-item label="坡度：">
                    <!-- 坡度组件 -->
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" icon="el-icon-refresh-left">重置</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-s-data">图表</el-button>
                </el-form-item>
                <!-- <el-form-item>
                    <el-button type="primary" @click="onSubmit" icon="el-icon-upload2">导入</el-button>
                </el-form-item>
                <el-form-item style="margin-left: auto">
                    <el-button type="primary" @click="onSubmit" icon="el-icon-plus">新建</el-button>
                </el-form-item> -->
            </el-form>
            <el-table :data="tableData" ref="multipleTable" border style="width: 100%"
                @selection-change="handleSelectionChange" tooltip-effect="dark" :header-cell-style="{
                    background: '#03146b',
                    color: '#fff',
                    fontSize: '18px',
                    'text-align': 'center',
                    padding: '16px 0' /* 调整这里的值以改变高度 */,
                }" :cell-style="{ 'text-align': 'center', fontSize: '13px' }">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column fixed prop="serial" label="序号" width="70">
                </el-table-column>
                <el-table-column prop="content" label="编码" width="150">
                </el-table-column>
                <el-table-column prop="processing" label="实验室统一编号" width="150">
                </el-table-column>
                <el-table-column prop="protime" label="代号" width="130">
                </el-table-column>
                <el-table-column prop="Processors" label="名称" width="100">
                </el-table-column>
                <el-table-column prop="experimenter" label="采样点位置" width="120">
                </el-table-column>
                <el-table-column prop="units" label="采样时间" width="120">
                </el-table-column>
                <el-table-column prop="time" label="采样人员" width="120">
                </el-table-column>
                <el-table-column prop="species" label="数据负责人"> </el-table-column>
                <el-table-column prop="methods" label="树种" width="100">
                </el-table-column>
                <el-table-column prop="nodes" label="经度" width="100">
                </el-table-column>
                <el-table-column prop="finishtime" label="纬度" width="100">
                </el-table-column>
                <!-- <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div style="display: flex; justify-content: center; gap: 8px">
                            <el-button size="mini" type="primary" plain icon="el-icon-edit"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button size="mini" type="success" plain icon="el-icon-success"
                                @click="handleEdit(scope.$index, scope.row)">确认</el-button>
                            <el-button size="mini" type="danger" plain icon="el-icon-delete-solid"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </div>
                    </template>
                </el-table-column> -->
            </el-table>
            <div class="footer">
                <div style="margin-top: 20px">
                    <el-button @click="selectAll">选择全部</el-button>
                    <el-button @click="inverseSelection">反向选择</el-button>
                    <el-button @click="toggleSelection()">清楚选择</el-button>
                    <el-button @click="toggleSelection()">删除所选</el-button>
                </div>
                <div class="block">
                    <span class="demonstration"></span>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper" :total="400">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- <div class="footer">
        <div style="margin-top: 20px">
          <el-button @click="selectAll">选择全部</el-button>
          <el-button @click="inverseSelection">反向选择</el-button>
          <el-button @click="toggleSelection()">清楚选择</el-button>
        </div>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
          </el-pagination>
        </div>
      </div> -->
    </div>
</template>

<script>
export default {
    name: "sampleProcess",
    components: {},
    data() {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value1: '', // 用于行政区划的国家选择器
            value2: '', // 用于行政区划的省份选择器
            value3: '', // 用于采样时间的日期选择器
            value4: '', // 用于树种选择器
            value5: '', // 用于列选择器，这里添加缺失的定义
            formInline: {
                name: '',
                code: '',
                sampler: '',
                owner: '',
            },
            formInline: {
                user: "",
                region: "",
            },
            tableData: [
                {
                    serial: "IDM0001",
                    content: "处理内容",
                    processing: "处理过程",
                    protime: "2024-08-25 11:25:00",
                    Processors: "范子昂",
                    experimenter: "袁玉江",
                    units: "年轮室",
                    time: "2024-08-30 11:05:00",
                    species: "雪岭云杉(Picea schrenkiana )",
                    methods: "实验方法",
                    nodes: "实验节点",
                    finishtime: "2024-08-30 11:05:00",
                },
                {
                    serial: "IDM0002",
                    content: "处理内容",
                    processing: "处理过程",
                    protime: "2024-08-25 11:25:00",
                    Processors: "范子昂",
                    experimenter: "袁玉江",
                    units: "年轮室",
                    time: "2024-08-30 11:05:00",
                    species: "雪岭云杉(Picea schrenkiana )",
                    methods: "实验方法",
                    nodes: "实验节点",
                    finishtime: "2024-08-30 11:05:00",
                },
                {
                    serial: "IDM0001",
                    content: "处理内容",
                    processing: "处理过程",
                    protime: "2024-08-25 11:25:00",
                    Processors: "范子昂",
                    experimenter: "袁玉江",
                    units: "年轮室",
                    time: "2024-08-30 11:05:00",
                    species: "雪岭云杉(Picea schrenkiana )",
                    methods: "实验方法",
                    nodes: "实验节点",
                    finishtime: "2024-08-30 11:05:00",
                },
                {
                    serial: "IDM0002",
                    content: "处理内容",
                    processing: "处理过程",
                    protime: "2024-08-25 11:25:00",
                    Processors: "范子昂",
                    experimenter: "袁玉江",
                    units: "年轮室",
                    time: "2024-08-30 11:05:00",
                    species: "雪岭云杉(Picea schrenkiana )",
                    methods: "实验方法",
                    nodes: "实验节点",
                    finishtime: "2024-08-30 11:05:00",
                },
                {
                    serial: "IDM0001",
                    content: "处理内容",
                    processing: "处理过程",
                    protime: "2024-08-25 11:25:00",
                    Processors: "范子昂",
                    experimenter: "袁玉江",
                    units: "年轮室",
                    time: "2024-08-30 11:05:00",
                    species: "雪岭云杉(Picea schrenkiana )",
                    methods: "实验方法",
                    nodes: "实验节点",
                    finishtime: "2024-08-30 11:05:00",
                },
                {
                    serial: "IDM0002",
                    content: "处理内容",
                    processing: "处理过程",
                    protime: "2024-08-25 11:25:00",
                    Processors: "范子昂",
                    experimenter: "袁玉江",
                    units: "年轮室",
                    time: "2024-08-30 11:05:00",
                    species: "雪岭云杉(Picea schrenkiana )",
                    methods: "实验方法",
                    nodes: "实验节点",
                    finishtime: "2024-08-30 11:05:00",
                },
                {
                    serial: "IDM0001",
                    content: "处理内容",
                    processing: "处理过程",
                    protime: "2024-08-25 11:25:00",
                    Processors: "范子昂",
                    experimenter: "袁玉江",
                    units: "年轮室",
                    time: "2024-08-30 11:05:00",
                    species: "雪岭云杉(Picea schrenkiana )",
                    methods: "实验方法",
                    nodes: "实验节点",
                    finishtime: "2024-08-30 11:05:00",
                },
                {
                    serial: "IDM0002",
                    content: "处理内容",
                    processing: "处理过程",
                    protime: "2024-08-25 11:25:00",
                    Processors: "范子昂",
                    experimenter: "袁玉江",
                    units: "年轮室",
                    time: "2024-08-30 11:05:00",
                    species: "雪岭云杉(Picea schrenkiana )",
                    methods: "实验方法",
                    nodes: "实验节点",
                    finishtime: "2024-08-30 11:05:00",
                },
                {
                    serial: "IDM0001",
                    content: "处理内容",
                    processing: "处理过程",
                    protime: "2024-08-25 11:25:00",
                    Processors: "范子昂",
                    experimenter: "袁玉江",
                    units: "年轮室",
                    time: "2024-08-30 11:05:00",
                    species: "雪岭云杉(Picea schrenkiana )",
                    methods: "实验方法",
                    nodes: "实验节点",
                    finishtime: "2024-08-30 11:05:00",
                },
                {
                    serial: "IDM0002",
                    content: "处理内容",
                    processing: "处理过程",
                    protime: "2024-08-25 11:25:00",
                    Processors: "范子昂",
                    experimenter: "袁玉江",
                    units: "年轮室",
                    time: "2024-08-30 11:05:00",
                    species: "雪岭云杉(Picea schrenkiana )",
                    methods: "实验方法",
                    nodes: "实验节点",
                    finishtime: "2024-08-30 11:05:00",
                },
            ],
            currentPage4: 4,
        };
    },
    created() { },
    methods: {
        onSubmit() {
            console.log("submit!");
        },
        onSearch() {
            console.log("search!");
        },
        selectAll() {
            this.$refs.multipleTable.toggleAllSelection();
        },
        // 反向选择
        // 反选，重新遍历一遍数据
        inverseSelection() {
            this.tableData.forEach((item) => {
                this.$refs.multipleTable.toggleRowSelection(item);
            });
        },

        toggleSelection(rows) {
            if (rows) {
                rows.forEach((row) => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 编辑处理
        handleEdit(index, row) {
            console.log("Editing row:", index, row);
            // 可以弹出编辑对话框，并将选中行的数据传递进去
            this.$prompt("请输入新的名称:", row.protime, {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            })
                .then(({ value }) => {
                    row.protime = value; // 更新名称字段
                    this.$message({
                        type: "success",
                        message: "编辑成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "编辑取消",
                    });
                });
        },

        // 删除处理
        handleDelete(index, row) {
            console.log("Deleting row:", index, row);
            this.$confirm("确定删除此行数据吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    // 从表格数据中删除该行
                    this.tableData.splice(index, 1);
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "删除取消",
                    });
                });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    // padding: 1rem;
    background: #fff;
    margin-top: 1.5rem;
}

// .header {
//     height: 4rem;
//     display: flex;
//     align-items: center;
//     padding-left: 1rem;
//     color: rgb(7, 46, 82);
//     font-size: 24px;
//     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
//     /* 添加阴影 */
//     background: #fff;
//     /* 确保背景为白色 */
// }

.content {
    margin: -1rem 0rem;
    border: #eceaeae8 1px solid;
    padding: 1rem;
}

.footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.block {
    display: flex;
    gap: 16px;
    /* Adjust gap to your preference */
    margin-top: 20px;
}

/* 这部分是增加按钮圆角的样式 */
.el-button {
    border-radius: 5px;
    /* 增大圆角 */
}

.el-button--primary {
    border-radius: 5px;
    /* 确保主要按钮也有相同的圆角 */
}

.demo-form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.el-form-item {
    margin-right: 16px;
    margin-bottom: 16px;
    flex: 0 0 auto;
}

@media (max-width: 768px) {
    .el-form-item {
        flex-basis: 100%;
        margin-right: 0;
    }
}
</style>
